import React from 'react';
import {Link} from "react-router";
import PropTypes from 'prop-types';
import axios from 'axios';
import styles from '../css/Project.css';
import stylesForget from '../css/ForgetPassWorld.css';


class ForgetPassword extends React.Component {

    constructor () {
        super();
        this.state = {
            seconds: 0,
            dlgTipTxt: '免费获取验证码',
            form: {
                userPhone: {
                    valid: false,
                    value: '',
                    error: ''
                },
                password: {
                    valid: false,
                    value: 0,
                    error: ''
                },
                password_two: {
                    valid: false,
                    value: 0,
                    error: ''
                },
                code: {
                    valid: false,
                    value: 0,
                    error: ''
                },
            }
        };
    }

    sendEmail = () => {
        this.setState({seconds: 59});
        let siv = setInterval(() => {
            this.setState((preState) => ({
                seconds: preState.seconds - 1,
                dlgTipTxt:  preState.seconds > 1? `(${preState.seconds - 1})`:'免费获取验证码',
            }), () => {
                if (this.state.seconds == 0) {
                    clearInterval(siv);
                }
            });
        }, 1000)
    }

    _sendVerifyCode(value){
        if (this.state.seconds >0)
            return;
        this.sendEmail();
        console.log(value)
        if (value.length==0){
            alert('请输入手机号');
            return;
        } else if(value.length!=11){
            alert('你输入的手机号有误');
            return;
        }

        axios.get('http://guoxue.boyueguoxue.cn/User/sendSmsForForget.do?tel='+value+'&type=104')
            .then(function (response) {
                let code=response.data.code;
                let message=response.data.message;
                console.log('code'+code);
                console.log(response.data);
                if(code==200){
                   // alert('验证码已发送请注意查收');
                }else {
                    alert(message);
                    return;
                }
            })
            .catch(function (error) {
                alert(error)
            })
    }

    handleValueChange (field, value, type = 'string') {


        const {form} = this.state;

        const newFieldObj = {value, valid: true, error: ''};

        switch (field) {
            case 'userPhone': {
                if (value.length != 11) {
                    newFieldObj.error = '您输入的手机号错误';
                    newFieldObj.valid = false;
                } else if (value.length === 0) {
                    newFieldObj.error = '手机号码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'password': {
                if (value.length>16||value.length<6) {
                    newFieldObj.error = '请输入6~16位数字或英文字母密码';
                    newFieldObj.valid = false;
                }else if (value.length === 0) {
                    newFieldObj.error = '密码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'password_two': {
                if (value.length>16||value.length<6) {
                    newFieldObj.error = '请输入6~16位数字或英文字母密码';
                    newFieldObj.valid = false;
                }else if (value.length === 0) {
                    newFieldObj.error = '密码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'code': {
                if (value.length>46) {
                    newFieldObj.error = '请输入数字验证码';
                    newFieldObj.valid = false;
                }else if (value.length === 0) {
                    newFieldObj.error = '验证码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
        }

        this.setState({
            form: {
                ...form,
                [field]: newFieldObj
            }
        });
    }
    handleSubmit (e) {
        e.preventDefault();

        const {form: {userPhone, password,password_two,code,tui_phone}} = this.state;
        if (!userPhone.valid ) {
            alert(userPhone.error);
            return;
        }else if(!password.valid){
            alert(password.error);
            return;
        }else if(!password_two.valid){
            alert(password_two.error);
            return;
        }else if(!code.valid){
            alert(code.error);
            return;
        }
        axios.get('http://guoxue.boyueguoxue.cn/User/forgetPassword.do?modifyCode='+code.value+'&tel='
            +userPhone.value+'&password='+password.value)
            .then(function (response) {
                let code=response.data.code;
                let message=response.data.message;
                console.log('code'+code);
                console.log(response.data);
                if(code==200){
                    alert('密码修改成功功');
                }else {
                    alert(message);
                    return;
                }
            })
            .catch(function (error) {
                alert(error);
            })
    }


    render () {
        const {form: {userPhone, password,password_two,code,tui_phone}} = this.state;
        return (
            <div>
                <h1>修改密码</h1>
                <div id="headDiv" className={styles["Project-layoutHead"]}></div>
                <div  id="bodyDiv" className={styles["Project-layoutBody"]}>
                    <div id="bodyDivCenter" className={stylesForget["Forget-Layout-center"]}>
                        <form  onSubmit={(e) => this.handleSubmit(e) }>
                        <input
                            className={stylesForget["Forget-inputDefault"]}
                            type="text"
                            value={userPhone.value}
                            placeholder="请输入您的手机号"
                            onChange={(e) => this.handleValueChange('userPhone', e.target.value)}
                        />
                        <br/>

                        <input
                            className={stylesForget["Forget-inputDefault"]}
                            type="password"
                            value={password.value || ''}
                            placeholder="请输入密码"
                            onChange={(e) => this.handleValueChange('password', e.target.value, 'number')}
                        />
                        <br/>

                        <input
                            className={stylesForget["Forget-inputDefault"]}
                            type="password"
                            value={password_two.value || ''}
                            placeholder="请再次输入密码"
                            onChange={(e) => this.handleValueChange('password_two', e.target.value, 'number')}
                        />

                            <br/>
                            <div className={stylesForget["Forget-div"]}>
                            <input
                            className={stylesForget["Forget-inputDefault0"]}
                            type="number"
                            value={code.value || ''}
                            placeholder="请输入验证码"
                            onChange={(e) => this.handleValueChange('code', e.target.value, 'number')}/>
                           <input className={stylesForget["Forget-getButton"]} type="button" id="btn" value={this.state.dlgTipTxt} onClick={() => this._sendVerifyCode(userPhone.value)} />
                            </div>
                            <br/>
                            <div className={styles["Project-bottom0"]}>
                                <input className={stylesForget["Forget-button"]}  type="submit" value="确认修改"/>
                            </div>
                    </form>
                    </div>
                    </div>
                </div>
        );
    }

}
ForgetPassword.contextTypes = {
    router: PropTypes.object.isRequired
};
export default ForgetPassword;